<script setup lang='ts'>
defineOptions({ name: 'AppSportsPageBetsFeed' })

const { allSportsCount } = storeToRefs(useSportsStore())

const currentLiveNav = ref(0)

// 体育项目选项
const sportLiveNavs = computed(() => {
  const _all = { label: $t('spt_all'), value: 0, icon: '' }
  if (allSportsCount.value && allSportsCount.value.list && allSportsCount.value.list.length > 0) {
    const arr = allSportsCount.value.list.map((item) => {
      return {
        ...item,
        label: item.sn,
        value: item.si,
        icon: item.spic,
      }
    })

    return [_all, ...arr]
  }
  return [_all]
})

const { run, runAsync, data } = useRequest(ApiSportsFollowBetList)
/** 定时更新数据 */
const { startTimer, stopTimer } = useSportsDataUpdate(() => run({ si: currentLiveNav.value }), 30)

const list = computed(() => {
  if (data.value && data.value.d && data.value.d.length) {
    return data.value.d
  }
  return []
})

watch(currentLiveNav, (a) => {
  run({ si: a })
})

onActivated(() => {
  startTimer()
})
onDeactivated(() => {
  stopTimer()
})
onBeforeUnmount(() => {
  stopTimer()
})

await application.allSettled([runAsync({ si: currentLiveNav.value })])
</script>

<template>
  <div>
    <AppSportsTab class="mb-[17px]" v-model="currentLiveNav" :list="sportLiveNavs" />
    <div class="mt-[16px]">
      <div class="flex flex-col">
        <AppSportsBetsFeedFollowBetSlip v-for="item in list" :data="item" :key="item.ono" />
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
